<template>
	<div class="container">
		<h1 class="tip">确认挂号信息</h1>
		<!-- 就诊人信息卡片 -->
		<el-card class="box-card">
			<!-- 卡片的头部 -->
			<template #header>
				<div class="card-header">
					<span style="line-height: 32px;">请选择就诊人</span>
					<!-- 引入的 eleme 图标可以直接当按钮组件的属性使用 -->
					<el-button @click="goUser" type="success" :icon="User">
						添加就诊人
					</el-button>
				</div>
			</template>
			<!-- 卡片的身体 -->
			<div class="users">
				<Visitor :confrimed="confrimed" @click="changeVId(visitor.id)" :visitor="visitor"
					v-for="visitor in visitors" :key="visitor.id" class="item" />
			</div>
		</el-card>
		<!-- 医生卡片 -->
		<el-card class="box-card">
			<!-- 卡片头部 -->
			<template #header>
				<div class="card-header">
					<span>挂号信息</span>
				</div>
			</template>
			<!-- 展示医生信息 -->
			<el-descriptions class="margin-top" :column="2" border>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							就诊日期
						</div>
					</template>
					{{ schedule?.workDate }} {{ schedule?.param.dayOfWeek }} {{ schedule?.workTime ? "上午" : "下午" }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							就诊医院
						</div>
					</template>
					{{ schedule?.param.hosname }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							就诊科室
						</div>
					</template>
					{{ schedule?.param.depname }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							医生姓名
						</div>
					</template>
					{{ schedule?.docname }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							医生职称
						</div>
					</template>
					{{ schedule?.title }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							医生专长
						</div>
					</template>
					{{ schedule?.skill }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							医事服务费
						</div>
					</template>
					<span style="color: red;">{{ schedule?.amount }}</span>
				</el-descriptions-item>
			</el-descriptions>
		</el-card>
		<!-- 确定挂号按钮 -->
		<div class="btn">
			<el-button @click="submitOrder" :disabled="confrimed === 0" type="primary"
				style="width: 160px;">确认挂号</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
defineOptions({
	name: "Step2"
})
// 引入组合式 api 
import { onMounted, ref } from 'vue';
// 引入图标
import { User } from '@element-plus/icons-vue';
// 引入接口
import { reqGetUser, reqSchedule, reqSubmitOrder } from '@/api/hospital';
import { VisitorData, VisitorArr, Doctor, SubmitOrderData } from '@/api/hospital/type';
import { useRoute, useRouter } from 'vue-router';


/* 数据 */
// 就诊人信息 
let visitors = ref<VisitorArr>([])
// 实例化一个路由
const route = useRoute();
// 实例化路由器
const router = useRouter();
// 医生排班信息
let schedule = ref<Doctor>();
// 被选中的就诊人 id 
let confrimed = ref<number>(0);
// 生成的订单 id 
let orderId = ref<number>()


/* 方法 */
// 获取就诊人信息
async function getVisitors() {
	let result: VisitorData = await reqGetUser();
	if (result.code === 200) {
		visitors.value = result.data
	}
}
// 获取医生排班信息
async function getSchedule() {
	let result = await reqSchedule(route.query.docId as string);
	if (result.code === 200) {
		schedule.value = result.data;
	}
}
// 获取订单 id 
async function getOrderId() {
	let result: SubmitOrderData = await reqSubmitOrder(schedule.value?.hoscode!, schedule.value?.id!, confrimed.value)
	if (result.code === 200) {
		orderId.value = result.data
		// 在获取完 id 后即进行路由跳转（此时路由跳转的函数在获取 id 后执行）
		// 不能在点击 submitOrder 里执行回调，那样路由跳转是同步函数会在获取 id 之前
		router.push({ path: "/user/order", query: { id: orderId.value } })
	}
}
// 点击就诊人后的回调
function changeVId(id: number) {
	if (id === confrimed.value) {
		confrimed.value = 0
	} else {
		confrimed.value = id
	}
}
// 点击确认挂号的回调
function submitOrder() {
	// 如果想在这里执行路由跳转，则应放在 then 里
	getOrderId()
}
// 点击添加就诊人的回调
function goUser() {
	router.push({
		path: "/user/patient", query: {
			type: "add",
			id: ""
		}
	})
}

// 挂载完成后获取就诊人信息
onMounted(() => {
	// 获取就诊人信息 
	getVisitors();
	// 获取医生排班信息
	getSchedule();
})
</script>

<style scoped lang="scss">
.container {
	.tip {
		font-weight: 900;
		color: #7f7f7f;
		font-size: 20px;
	}

	.box-card {
		margin: 20px 0;

		.card-header {
			display: flex;
			justify-content: space-between;
		}

		.users {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.item {
				width: 32%;
				margin: 5px;
			}
		}
	}

	.btn {
		display: flex;
		// 主轴（左右）居中
		justify-content: center;
		margin-bottom: 10px;
	}
}
</style>